import { hexToRgba, toSeries, getAxisMax, toPixel } from "@/utils/convert";
import { formatDate } from "@/utils/formatTime";
import * as echarts from "echarts";

export function pieOption(data) {
  const option = {
    title: {
      text: "污染源解析",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        name: "污染源解析",
        type: "pie",
        radius: ["40%", "75%"],
        center: ["50%", "50%"],
        avoidLabelOverlap: true,
        itemStyle: {
          borderRadius: 2,
          borderColor: "#fff",
          borderWidth: 2,
          // shadowBlur: 10,
          // borderColor: color[i],
          // shadowColor: color[i],
          roseType: "area",
        },
        label: {
          show: true,
          // position: "center",
          formatter: "{b}: ({d}%)",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 18,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: true,
        },
        data,
      },
      {
        radius: ["65%", "75%"],
        center: ["50%", "50%"],
        type: "pie",

        itemStyle: {
          color: "rgba(250,250,250,0.5)",
        },
        data: [
          {
            value: 1,
          },
        ],
      },
    ],
  };
  return option;
}

export function shapeOption(x, y, z = 36.2, zReal) {
  x = x.map((i) => parseInt(i));
  var zData = [
    [x[0], z],
    [x[x.length - 1], z],
  ];

  const markPointLabel = (params) => {
    if (zReal) {
      return `实测水位:${zReal}米`;
    } else {
      return `预报水位:${z}米`;
    }
  };

  const option = {
    title: {
      text: "断面形状",
      left: "50%",
      textAlign: "center",
      fontSize: 14,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#ddd",
        },
      },
      backgroundColor: "rgba(255,255,255,1)",
      padding: [1, 1],
      color: "#7588E4",
      extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)",

      formatter: (item) => {
        var idx = item[0].dataIndex;
        return `距离(米): ${x[idx]}<br/>高程(米): ${
          y[idx]
        }<br/>水深(米): ${Math.max(0, z - y[idx]).toFixed(2)}`;
      },
    },
    grid: {
      top: "3%",
      left: "0%",
      right: "3%",
      bottom: "1%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      name: "距离(米)",
      nameLocation: "center",
      min: Math.min(...x),
      max: Math.max(...x),
      maxInterval: 200,
      boundaryGap: false,
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#609ee9",
          width: 3,
        },
      },
      axisLabel: {
        margin: 3,
        fontSize: 14,
        showMinLabel: true,
        showMaxLabel: true,
        formatter: (value, index) => {
          var result = value;
          if (index === 0) {
            result = `${value}\n左岸`;
          } else if (value === x[x.length - 1]) {
            result = `${value}\n右岸`;
          }
          return result;
        },
      },
      nameTextStyle: {
        color: "#609ee9",
        fontSize: 14,
        fontWeight: 600,
        // lineHeight: -30,
        padding: [5, 0, 0, 0],
      },
    },
    yAxis: [
      {
        type: "value",
        position: "left",
        name: "高程(米)",
        axisTick: {
          show: false,
        },
        scale: true,
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#609ee9",
            width: 3,
          },
          show: true,
          onZero: false,
        },
        axisLabel: {
          margin: 3,
          fontSize: 14,
          color: "#609ee9",
        },
        nameTextStyle: {
          color: "#609ee9",
          fontSize: 14,
          fontWeight: 600,
          lineHeight: toPixel(-30),
          padding: [0, 0, 0, toPixel(70)],
        },
      },
      {
        type: "value",
        position: "right",
        offset: -1,
        axisTick: {
          show: true,
        },
        scale: true,
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#609ee9",
            width: 3,
          },

          show: true,
          onZero: false,
        },
        axisLabel: {
          margin: 10,
          fontSize: 14,
        },
        show: true,
      },
    ],
    series: [
      {
        name: "水面线",
        type: "line",
        showSymbol: false,
        data: zData,
        z: 1,
        areaStyle: {
          //color: '#94C9EC'
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: "rgba(7,44,90,0.3)",
            },
            {
              offset: 1,
              color: "rgba(0,146,246,0.9)",
            },
          ]),
        },
        markPoint: {
          data: [
            {
              symbolSize: 0,
              animation: true,
              xAxis: 0,
              yAxis: z,
              label: {
                show: true,
                fontSize: 14,
                fontWeight: "bold",
                color: colors.zColor,
                show: true,
                position: "top",
                formatter: markPointLabel,
              },
              itemStyle: { color: "#f00" },
            },
          ],
        },
        lineStyle: {
          width: 3,
        },
      },
      {
        name: "高程",
        type: "line",
        smooth: true,
        showSymbol: false,
        symbol: "circle",
        symbolSize: 6,
        data: toSeries(x, y),
        z: 2,
        areaStyle: {
          color: "#909399",
          opacity: 1,
        },
        itemStyle: {
          color: "#C0C4CC",
        },
        lineStyle: {
          width: 2,
        },
      },
    ],
  };
  return option;
}

export function regulateOption(d, q, z, id, qmax, zmax, speed = 300) {
  const option = {
    legend: {
      show: true,
      selected: {},
    },

    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#ddd",
        },
      },
      backgroundColor: "rgba(255,255,255,1)",
      padding: [1, 1],
      color: "#7588E4",
      extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)",
    },
    grid: {
      top: "3%",
      left: "2%",
      right: "0%",
      bottom: "1%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      // min: Math.min(...d),
      // max: Math.max(...d),
      axisTick: {
        show: false,
      },
      showMaxLabel: true,
      inverse: false,
      axisLine: {
        lineStyle: {
          color: "#609ee9",
          width: 3,
        },
      },
      axisLabel: {
        margin: 3,
        fontSize: 14,
      },
      interval: 50,
      splitLine: {
        show: true,
      },
      // data: d.map((x, index) => `${x}\n${id[index]}`),
      data: d.map((x, index) => `${id[index]}`),
    },
  };
  option.yAxis = [zAxis(colors.zColor, "水位(米)"), qAxis(true)];
  option.yAxis[0].max = zmax;
  option.yAxis[1].max = qmax;
  option.series = [
    series(z, 0, "水位过程", colors.zColor, 5),
    series(q, 1, "流量过程", colors.qColor, 5),
  ];
  Object.assign(option.series[0], {
    animation: true, //控制动画示否开启
    animationDurationUpdate: speed, // 动画的时长，它是以毫秒为单位
    // animationDuration: (arg) => {
    //   return 100 * arg;
    // },
    animationEasingUpdate: "linear", //缓动动画
    // animationThreshold: 8, //动画元素的阈值
    areaStyle: {
      //color: '#94C9EC'
      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        {
          offset: 0,
          color: colors.zColor,
        },
        {
          offset: 1,
          color: "rgba(0,146,246,0.9)",
        },
      ]),
    },
  });
  Object.assign(option.series[1], {
    animation: true, //控制动画示否开启
    animationDurationUpdate: speed, // 动画的时长，它是以毫秒为单位
    // animationDuration: (arg) => {
    //   return 100 * arg;
    // },
    animationEasingUpdate: "linear", //缓动动画
    // animationThreshold: 8, //动画元素的阈值
    areaStyle: {
      //color: '#94C9EC'
      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        {
          offset: 0,
          color: colors.qColor,
        },
        {
          offset: 1,
          color: "rgba(0,146,246,0.9)",
        },
      ]),
    },
  });
  return option;
}

const colors = {
  tColor: "#26C0C0",
  qColor: "#36CE9E",
  zColor: "#609ee9",
  hColor: "#F58080",
  zuColor: "#6f1bff",
  zdColor: "#409EFF",
};

function labelFontSize(normal) {
  return normal ? toPixel(16) : toPixel(12);
}

function txtFontSize(normal) {
  return normal ? toPixel(14) : toPixel(12);
}

function lineWidth(normal) {
  return normal ? toPixel(3) : toPixel(2);
}

function xAxis(data, normal = true) {
  var axis = {
    type: "time",
    boundaryGap: false,
    axisLabel: {
      color: "#333",
      fontSize: labelFontSize(normal) - 1,
      showMaxLabel: true,
      rich: {
        date: {
          fontSize: "12px",
          fontWeight: "bold",
        },
        time: {
          fontSize: "14px",
        },
      },
    },
    axisLine: {
      lineStyle: {
        color: "#26C0C0",
        width: lineWidth(normal),
      },
    },
    // min: formatDate(new Date(data[0]), "YYYY-mm-dd HH:00:00"),
    // max: (value) => {
    //   var t = new Date(value.max);
    //   t = new Date(t.setHours(t.getHours() + 1));
    //   return formatDate(t, "YYYY-mm-dd HH:00:00");
    // },
    min: data[0],
    max: data[data.length - 1],
    name: "",
  };
  if (normal) {
    axis.axisLabel.formatter = (value, index) => {
      const date = new Date(value);
      var time = formatDate(date, "HH:MM");
      var result = `{time|${time}}`;
      if (index === 0 || index === 1) {
        result = `{time|${time}}\n{date|${formatDate(date, "YY-mm-dd")}}`;
      } else if (date.getHours() === 0) {
        result = `{time|${time}}\n{date|${date.getDate()}日}`;
      }
      return result;
    };
  }
  return axis;
}

function qAxis(
  right = true,
  normal = true,
  color = "#36CE9E",
  name = "流量(m³/s)"
) {
  return {
    type: "value",
    name,
    axisLabel: {
      color,
      fontSize: labelFontSize(normal),
    },
    nameTextStyle: {
      color: color,
      fontSize: txtFontSize(normal),
      fontWeight: 600,
      lineHeight: toPixel(-30),
      padding: right ? [0, toPixel(100), 0, 0] : [0, 0, 0, toPixel(80)],
    },
    splitLine: {
      show: false,
      lineStyle: {
        type: "dashed",
        color,
      },
    },
    axisLine: {
      lineStyle: {
        color,
        width: lineWidth(normal),
      },
      show: true,
    },
    axisTick: {
      show: false,
    },
    max: (value) => {
      // let digit = Math.ceil(value.max).toFixed(0).length;
      // digit = Math.pow(10, digit - 1);
      // let max = Math.ceil((value.max * 1.2) / digit) * digit;
      return getAxisMax(value.max);
    },
  };
}

function zAxis(color = "#609ee9", name = "水位(米)", normal = true) {
  return {
    type: "value",
    name,
    axisLabel: {
      color,
      fontSize: labelFontSize(normal),
    },
    nameTextStyle: {
      color,
      fontSize: txtFontSize(normal),
      fontWeight: 600,
      lineHeight: toPixel(-40),
      padding: [0, 0, 0, toPixel(70)],
    },
    splitLine: {
      show: false,
      lineStyle: {
        type: "dashed",
        color,
      },
    },
    axisLine: {
      lineStyle: {
        color,
        width: lineWidth(normal),
      },
      show: true,
    },
    axisTick: {
      show: false,
    },
    min: 25,
    max: (value) => {
      // let digit = Math.ceil(value.max).toFixed(0).length;
      // digit = Math.pow(10, digit - 1);
      // let max = Math.ceil((value.max * 1.2) / digit) * digit;
      // return max;
      return getAxisMax(value.max);
    },
  };
}

function hAxis(color = "#F58080", name = "水头(米)", normal = true) {
  return {
    type: "value",
    name,
    position: "right",
    offset: normal ? 80 : 60,
    max: 10,
    axisLabel: {
      color,
      fontSize: labelFontSize(normal),
    },
    nameTextStyle: {
      color,
      fontSize: txtFontSize(normal),
      fontWeight: 600,
      lineHeight: toPixel(-80),
      padding: [0, normal ? toPixel(80) : toPixel(60), 0, 0],
    },
    splitLine: {
      show: false,
      lineStyle: {
        type: "dashed",
        color,
      },
    },
    axisLine: {
      lineStyle: {
        color,
        width: lineWidth(normal),
      },
      show: true,
    },
    axisTick: {
      show: false,
    },
    max: (value) => {
      // let digit = Math.ceil(value.max).toFixed(0).length;
      // digit = Math.pow(10, digit - 1);
      // let max = Math.ceil((value.max * 1.2) / digit) * digit;
      // return max;
      return getAxisMax(value.max);
    },
  };
}

function eAxis(id, color = "#609ee9", normal = true, right = false) {
  var option = {
    type: "value",
    name: "开度(米)",
    axisLabel: {
      color,
      fontSize: labelFontSize(normal),
    },
    nameTextStyle: {
      color,
      fontSize: txtFontSize(normal),
      fontWeight: 600,
      lineHeight: toPixel(-40),
      padding: right ? [0, toPixel(100), 0, 0] : [0, 0, 0, toPixel(80)],
    },
    splitLine: {
      show: false,
      lineStyle: {
        type: "dashed",
        color,
      },
    },
    axisLine: {
      lineStyle: {
        color,
        width: lineWidth(normal),
      },
      show: true,
    },
    axisTick: {
      show: false,
    },
    min: 0,
    max: (value) => {
      var max = 1.2 * value.max;
      return Math.ceil(max * 10) / 10;
    },
  };
  // if (id > 0) {
  //   option.axisLabel.formatter = (value) => {
  //     if (value < 5) return value;
  //     else if (value >= 6) return "";
  //     else return "敞泄";
  //   };
  // }
  return option;
}

export function series(
  data,
  yAxisIndex,
  name,
  color,
  symbolSize,
  type = "line"
) {
  var option = {
    name,
    type,
    smooth: true,
    yAxisIndex,
    symbolSize,
    showSymbol: data.length < 80,
    itemStyle: {
      color,
    },
    zlevel: 3,
    lineStyle: {
      // shadowBlur: 3,
      shadowColor: hexToRgba(color, 0.5),
      // shadowOffsetY: 8,
    },
    data,
  };
  if (color != "") option.lineStyle.color = color;
  return option;
}

function option(
  normal = true,
  top = "8px",
  right = "8px",
  bottom = "8px",
  left = "8px"
) {
  return {
    legend: {
      top: 0,
      left: "center",
      fontSize: txtFontSize(normal),
      show: normal,
    },
    grid: {
      top,
      left,
      right,
      bottom,
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        animation: false,
        label: {
          backgroundColor: "#505765",
        },
      },
    },
    dataZoom: [
      {
        type: "inside",
        realtime: true,
        start: 0,
        end: 100,
      },
    ],
  };
}

//流量曲线样式
export function qOption(t, q, normal, name = "流量") {
  var options = option(normal);
  options.xAxis = xAxis(t, normal);
  options.yAxis = [qAxis(false, normal)];
  options.series = [series(toSeries(t, q), 0, name, colors.qColor, 5)];
  return options;
}

// 水位流量曲线样式
export function qzOption(t, q, z, normal = true, names = ["水位", "流量"]) {
  var options = option(normal);
  // t = tLabel(t);
  options.xAxis = xAxis(t, normal);
  options.yAxis = [
    zAxis(colors.zColor, "水位(米)", normal),
    qAxis(true, normal),
  ];
  options.yAxis[0].normal = options.yAxis[1].normal = normal;
  options.series = [
    series(toSeries(t, z), 0, names[0], colors.zColor, 5),
    series(toSeries(t, q), 1, names[1], colors.qColor, 5),
  ];
  return options;
}

export function qhOption(t, q, h, normal = true) {
  var options = qzOption(t, q, h, normal);
  options.yAxis[0].name = "水头(米)";
  options.series[0].name = "枢纽水头";
  return options;
}

// export function qrOption(t, q, r, normal = true) {
//   var options = qzOption(t, q, r, normal);
//   options.yAxis[0].name = "降雨量(毫米)";
//   options.series[0].name = "降雨量";
//   return options;
// }

export function qqzOption(t, q1, q2, z, normal = true) {
  var options = option(normal);
  options.xAxis = xAxis(t, normal);
  options.yAxis = [
    zAxis(colors.zColor, "水位(米)", normal),
    qAxis(true, normal),
  ];
  options.series = [
    series(toSeries(t, z), 0, "上游水位", colors.zColor, 5),
    series(toSeries(t, q1), 1, "入库流量", colors.qColor, 5),
    series(toSeries(t, q2), 1, "下泄流量", colors.hColor, 5),
  ];
  return options;
}

export function qzhOption(t, q, z, h, normal = true) {
  var options = option(normal);
  options.xAxis = xAxis(t, normal);
  options.yAxis = [
    zAxis(colors.zColor, "水位(米)", normal),
    qAxis(true, normal),
    hAxis(colors.hColor, "水头(米)", normal),
  ];
  options.grid.right = "5%";
  options.series = [
    series(toSeries(t, z), 0, "上游水位", colors.zColor, 5),
    series(toSeries(t, q), 1, "下泄流量", colors.qColor, 5),
    series(toSeries(t, h), 2, "枢纽水头", colors.hColor, 5),
  ];
  return options;
}

export function varOption(data, dataType, normal = true) {
  switch (dataType) {
    case "qz":
      return qzOption(data.t, data.q_t, data.z_t, normal);
    case "qr":
      return qrOption(
        data.t,
        data.q_t,
        data.cjw_t,
        data.hz_t,
        data.sq_t,
        normal
      );
    case "qh":
      return qOption(data.t, data.q_t, normal, "入库流量");
    case "qzh":
      return qzhOption(data.t, data.q_t, data.z_t, data.h_t, normal);
    case "qoz":
      return qOption(data.t, data.q_t, normal, "入库流量");
    case "limit":
      var option = qOption(data.t, data.limit, normal, "发电限制");
      option.yAxis[0].name = "出力(MW)";
      option.yAxis[0].max = 50;
      option.grid.left = "0%";
      option.grid.bottom = "0%";
      return option;
    default:
      return qOption(data.t, data.q_t, normal);
  }
}

export function damOption(t, zu_t, zd_t, q_t, h_t, zdw_t, hw_t) {
  var options = option();
  if (!t) return options;
  options.xAxis = xAxis(t);
  options.yAxis = [zAxis(), qAxis(), hAxis()];
  options.grid.right = "5%";
  options.series = [
    series(toSeries(t, zu_t), 0, "上游水位", colors.zuColor, 5),
    series(toSeries(t, zd_t), 0, "下游水位", colors.zdColor, 5),
    series(toSeries(t, q_t), 1, "下泄流量", colors.qColor, 5),
    series(toSeries(t, h_t), 2, "枢纽水头", colors.hColor, 5),
  ];
  if (zdw_t)
    options.series.push(
      series(toSeries(t, zdw_t), 0, "电站尾水位", "#337ecc", 5)
    );
  if (hw_t)
    options.series.push(series(toSeries(t, hw_t), 2, "发电水头", "#c45656", 5));
  return options;
}

export function naviOption(t, zu_t, zd_t, z_t, tag) {
  var options = option();
  if (!t) return options;
  options.xAxis = xAxis(t);
  options.yAxis = [zAxis(colors.zColor, "水深(米)")];
  options.yAxis[0].min = 0;
  options.series = [
    series(toSeries(t, zu_t), 0, "上游通航水深", colors.zColor, 5),
    series(toSeries(t, zd_t), 0, "下游通航水深", colors.qColor, 5),
    series(toSeries(t, z_t), 0, "最大通航水深", colors.hColor, 5),
  ];
  if (tag && tag.target1) {
    options.series[0].markLine = {
      data: [
        {
          name: "目标航深",
          yAxis: tag.target1,
          symbol: "circle",
          lineStyle: { color: "blue", type: "dashed", width: 2 },
          label: { formatter: "{b}: {c}米", position: "insideEndTop" },
        },
      ],
    };
  }
  // if (tag && tag.target2) {
  //   options.series[1].markLine = {
  //     data: [
  //       {
  //         name: "下游目标航深",
  //         yAxis: tag.target2,
  //         symbol: "circle",
  //         lineStyle: { color: "lime", type: "dashed", width: 2 },
  //         label: { formatter: "{b}: {c}米", position: "insideEndTop" },
  //       },
  //     ],
  //   };
  // }
  if (tag && tag.tick1 && tag.tick2) {
    var ranges = [];
    t.forEach((x) => {
      if (x.indexOf(tag.tick1) == 11) ranges.push(x);
      if (x.indexOf(tag.tick2) == 11) {
        if (ranges.length == 0) ranges.push(t[0]);
        ranges.push(x);
      }
    });
    if (ranges.length % 2 == 1) ranges.push(t[t.length - 1]);
    var markArea = {
      silent: true,
      itemStyle: {
        opacity: 0.2,
        color: "rgba(112, 100, 250, 0.12)",
        borderWidth: 1,
        borderColor: "rgba(112, 100, 250, 0.6)",
      },
      data: [],
      label: {
        show: true,
        position: "insideBottom",
        formatter: "通航时段",
        color: "#409EFF",
        borderWidth: 0,
      },
    };
    for (var i = 0; i < ranges.length; i += 2) {
      markArea.data.push([{ xAxis: ranges[i] }, { xAxis: ranges[i + 1] }]);
    }
    options.series.forEach((x) => (x.markArea = markArea));
  }
  return options;
}

export function powerOption(t, q_t, zdw_t, hw_t) {
  var options = option();
  if (!t) return options;
  options.xAxis = xAxis(t);
  options.yAxis = [zAxis(), qAxis(), hAxis()];
  options.grid.right = "5%";
  options.series = [
    series(toSeries(t, zdw_t), 0, "尾水位", colors.zuColor, 5),
    series(toSeries(t, q_t), 1, "下泄流量", colors.qColor, 5),
    series(toSeries(t, hw_t), 2, "发电水头", colors.hColor, 5),
  ];
  return options;
}

export function unitOption(t, p, n, tPower = null, tFull = null) {
  var options = option();
  if (!t) return options;
  // options.grid.right = "5%";
  options.xAxis = xAxis(t);
  options.yAxis = [
    // qAxis(false, true, colors.qColor, "流量(m³/s)"),
    zAxis(colors.zColor, "发电量(万kw·h)"),
    qAxis(true, true, colors.hColor, "台数(台)"),
  ];
  options.yAxis[1].max = 6;
  options.yAxis[0].max = 4.5;
  options.yAxis[0].min = 0;
  options.yAxis[0].nameTextStyle.padding = [0, toPixel(-120), 0, 0];
  options.yAxis[0].nameTextStyle.lineHeight = -80;
  options.series = [
    // series(toSeries(t, q), 0, "电站下泄流量", colors.qColor, 5),
    series(toSeries(t, p), 0, "发电量", colors.zColor, 5),
    series(toSeries(t, n), 1, "开机台数", colors.hColor, 5),
  ];
  if (tPower) {
    options.series[0].markLine = {
      data: [
        [
          {
            coord: [tPower, 0],
          },
          {
            coord: [tPower, 4],
          },
          {
            name: "开机时间",
            symbol: "circle",
            lineStyle: { color: "blue", type: "dashed", width: 2 },
            label: {
              formatter: "开机时间",
              position: "insideEndTop",
              fontSize: 14,
              fontWeight: 500,
            },
          },
        ],
        [
          {
            coord: [tFull, 0],
          },
          {
            coord: [tFull, 4],
          },
          {
            name: "满发时间",
            symbol: "circle",
            lineStyle: { color: "blue", type: "dashed", width: 2 },
            label: {
              formatter: "满发时间",
              position: "insideEndTop",
              fontSize: 14,
              fontWeight: 500,
            },
          },
        ],
      ],
    };
  }

  options.series[1].smooth = false;
  options.series[1].step = "middle";
  return options;
}

export function gateOption(t, q, qr, e, openCount, actCount, id) {
  var options = option();
  if (!t) return options;
  options.grid.right = "6%";
  options.xAxis = xAxis(t);
  options.yAxis = [
    eAxis(id, colors.zColor),
    qAxis(),
    hAxis(colors.hColor, "数量(孔)"),
  ];
  options.yAxis[0].min = 0;
  if (!e) e = [...Array(t.length)].map((x) => 0);
  options.series = [
    series(toSeries(t, q), 1, "计划下泄", colors.qColor, 5),
    series(toSeries(t, qr), 1, "指令下泄", "#0f0", 5),
    series(toSeries(t, e), 0, "闸门开度", colors.zColor, 5),
    series(toSeries(t, openCount), 2, "开启闸门数量", colors.hColor, 5),
    // series(toSeries(t, actCount), 2, "动作闸门数量", colors.zuColor, 5),
  ];
  for (var i = 2; i < options.series.length; i++) {
    options.series[i].smooth = false;
    options.series[i].step = "middle";
  }

  return options;
}

export function qrOption(t, q, cjw_t, hz_t, sq_t) {
  var options = option();
  if (!t) return options;
  options.xAxis = xAxis(t);
  options.yAxis = [zAxis(colors.zColor, "雨量(毫米)"), qAxis()];
  options.yAxis[0].nameTextStyle.padding[3] = toPixel(80);
  options.yAxis[0].min = 0;
  options.series = [
    series(toSeries(t, cjw_t), 0, "陈家湾雨情", colors.zColor, 5, "bar"),
    series(toSeries(t, hz_t), 0, "皇庄雨情", colors.zuColor, 5, "bar"),
    series(toSeries(t, sq_t), 0, "拾桥雨情", colors.hColor, 5, "bar"),
    series(toSeries(t, q), 1, "皇庄流量", colors.qColor, 5),
  ];
  return options;
}

export function vAxis(x, name, min = 0, max = 100) {
  if (x != null) {
    min = Math.min(...x);
    max = Math.max(...x);
  }
  return {
    type: "value",
    name,
    nameLocation: "end",
    min,
    max,
    boundaryGap: false,
    nameTextStyle: {
      fontSize: 15,
      fontWeight: "bold",
      verticalAlign: "top",
      padding: [toPixel(-30), 0, 0, toPixel(-130)],
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "#609ee9",
        width: 3,
      },
    },
    axisLabel: {
      margin: 3,
      fontSize: 14,
    },
  };
}

export function zdqOption(q, zd, zt) {
  var options = option();
  options.xAxis = vAxis(q, "下泄流量(m³/s)");
  options.yAxis = [zAxis()];
  options.series = [
    series(
      toSeries(q.slice(0, zd.length), zd),
      0,
      "下游水位",
      colors.zColor,
      5
    ),
    series(toSeries(q, zt), 0, "尾水位", "#00f", 5),
  ];
  return options;
}

export function zuvOption(z, v) {
  var options = option(false, "8px", "15px", "8px", "2px");
  options.xAxis = vAxis(z, "上游水位(米)");
  options.xAxis.type = "category";
  delete options.xAxis.min;
  delete options.xAxis.max;
  options.xAxis.nameTextStyle.padding = [toPixel(-30), 0, 0, toPixel(-100)];
  options.yAxis = [qAxis(false, true, colors.zColor, "库容(亿m³)")];
  options.yAxis[0].nameTextStyle.padding = [0, 0, 0, toPixel(100)];
  options.series = [series(toSeries(z, v), 0, "库容", colors.zColor, 5)];
  return options;
}

export function nhqOption(q, n) {
  var options = option(false, "8px", "15px", "8px", "2px");
  var min = q[0];
  min = Math.floor(min / 50) * 50;
  var max = q[q.length - 1];
  max = Math.ceil(max / 50) * 50;
  options.xAxis = vAxis(null, "机组流量(m³/s)", min, max);

  options.yAxis = [zAxis(colors.zColor, "出力(兆瓦)")];
  options.yAxis[0].min = 0;
  options.series = [series(toSeries(q, n), 0, "出力", colors.zColor, 5)];
  return options;
}

export function gateRuleOption(q_min, q_max, n_min, n_max, e_min, e_max) {
  var options = option();
  options.tooltip = {
    formatter(item) {
      const html = `<div>
                        <div>流量范围(m³/s):${q_min[item[0].dataIndex]}-${
        q_max[item[0].dataIndex] || ""
      }</div>
                            <div><span style="width:10px;height:10px;display: inline-block;background:${
                              item[1].color
                            }"></span> 开孔数范围(孔): ${
        n_min[item[0].dataIndex]
      }-${n_max[item[0].dataIndex] || ""}</div>
                            <div><span style="width:10px;height:10px;display: inline-block;background:${
                              item[3].color
                            }"></span> 开度范围(米): ${
        e_min[item[0].dataIndex]
      }-${e_max[item[0].dataIndex] || ""}</div>
                    </div>`;
      return html;
    },
    trigger: "axis",
  };
  options.xAxis = [
    {
      type: "category",
      data: q_min,
      show: false,
    },
    {
      type: "category",
      data: [...q_min, q_max[q_max.length - 1]],
      position: "bottom",
      boundaryGap: false,
      axisPointer: { show: false },
      showMaxLabel: true,
      splitLine: {
        show: true,
        lineStyle: {
          color: "#609ee9",
          width: 0.5,
        },
      },
      axisTick: { alignWithLabel: true }, // 刻度居中核心代码
      axisLabel: {
        textStyle: {
          // color: 'black', // 修改X轴文字的颜色
          fontSize: "14", // 修改X轴文字大小
        },
      },
    },
  ];
  options.yAxis = [
    zAxis(colors.zColor, "开孔数"),
    qAxis(true, true, colors.qColor, "开度(米)"),
  ];
  options.yAxis[0].min = 0;
  options.legend = {
    data: ["开孔数", "开度"],
  };
  options.series = [
    {
      name: "最小开孔数",
      type: "bar",
      stack: "n",
      yAxisIndex: 0,
      itemStyle: {
        borderColor: "transparent",
        color: "transparent",
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent",
        },
      },
      data: n_min,
    },
    {
      name: "开孔数",
      type: "bar",
      stack: "n",
      yAxisIndex: 0,
      label: {
        fontSize: 10,
        fontWeight: "bold",
        color: colors.zColor,
        show: true,
        position: "bottom",
        formatter: (params) => n_min[params.dataIndex],
      },
      markPoint: {
        symbolSize: 0,
        data: n_max.map((x, idx) => {
          return {
            coord: [idx, x],
            type: "max",
          };
        }),
        label: {
          fontSize: 10,
          fontWeight: "bold",
          color: colors.zColor,
          show: true,
          position: "top",
          formatter: (params) => {
            return n_max[params.data.coord[0]];
          },
        },
      },
      itemStyle: {
        color: colors.zColor,
      },
      data: n_max.map((x, idx) => {
        var d = x - n_min[idx];
        return d == 0 ? 0.5 : d;
      }),
    },
    {
      name: "最小开度",
      type: "bar",
      stack: "e",
      yAxisIndex: 1,
      itemStyle: {
        borderColor: "transparent",
        color: "transparent",
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent",
        },
      },
      data: e_min,
    },
    {
      name: "开度",
      type: "bar",
      stack: "e",
      yAxisIndex: 1,
      label: {
        show: true,
        position: "bottom",
        color: colors.qColor,
        fontSize: 10,
        fontWeight: "bold",
        formatter: function (params) {
          return e_min[params.dataIndex];
        },
      },
      markPoint: {
        symbolSize: 0,
        data: e_max.map((x, idx) => {
          return {
            coord: [idx, x],
          };
        }),
        label: {
          fontSize: 10,
          fontWeight: "bold",
          color: colors.qColor,
          show: true,
          position: "top",
          formatter: (params) => {
            return e_max[params.data.coord[0]];
          },
        },
      },
      itemStyle: {
        color: colors.qColor,
      },
      data: e_max.map((x, idx) => {
        var d = x - e_min[idx];
        return d == 0 ? 0.02 : Math.round(d * 10) / 10;
      }),
    },
  ];
  // options.series.forEach((x) => (x.smooth = false));
  return options;
}

export function qheOption(data) {
  var options = option(false, "8px", "15px", "8px", "2px");
  delete options.tooltip;
  options.xAxis = vAxis(null, "下泄流量(m³/s)", 0, 250);
  options.yAxis = [zAxis(colors.hColor, "水头(米)")];
  options.yAxis[0].max = 12;
  options.yAxis[0].min = 0;
  options.series = data.map((x) =>
    series(
      toSeries(
        x.q,
        Array(x.q.length)
          .fill(0)
          .map((v, i) => i / 10)
      ),
      0,
      "e=" + x.e,
      "",
      5
    )
  );
  return options;
}

export function qzReal(t, q, z, zd) {
  var options = option(true, "8px", "8px", "8px", "12px");
  var start = formatDate(new Date(), "YYYY-mm-dd 00:00:00");
  var end = formatDate(new Date(), "YYYY-mm-dd 24:00:00");
  options.xAxis = xAxis([start, end], true);

  options.yAxis = [zAxis(colors.zColor, "水位(米)", false), qAxis(true, false)];
  options.yAxis[0].nameTextStyle.padding = [0, 0, 0, toPixel(60)];
  options.yAxis[1].nameTextStyle.lineHeight = toPixel(-40);
  options.yAxis[1].nameTextStyle.padding = [0, toPixel(80), 0, 0];
  options.series = [series(toSeries(t, z), 0, "水位", colors.zColor, 5)];
  if (zd) {
    options.series[0].name = "上游水位";
    options.series.push(series(toSeries(t, zd), 0, "下游水位", "#00f", 5));
  }

  if (q) {
    options.series.push(series(toSeries(t, q), 1, "流量", colors.qColor, 5));
  } else options.grid.right = "18px";
  return options;
}

export function rainReal(t, r) {
  var options = option(true, "8px", "18px", "8px", "12px");
  options.legend.show = false;
  options.xAxis = xAxis(t, true);
  if (t && t.length > 1) {
    // if (t[0].indexOf(" ") > 0) {
    //   var start = formatDate(new Date(t[0]), "YYYY-mm-dd 00:00:00");
    //   var end = formatDate(new Date(t[t.length - 1]), "YYYY-mm-dd 24:00:00");
    //   options.xAxis = xAxis([start, end], true);
    // } else {
    //   options.xAxis = xAxis(t, true);
    //   options.xAxis.axisLabel.rich.time.fontSize = "12px";
    //   options.xAxis.axisLabel.formatter = (value, index) => {
    //     const date = new Date(value);
    //     var day = formatDate(date, "d");
    //     var result = `{time|${day}}`;
    //     if (index === 0 || index === 1) {
    //       result = `{time|${day}}\n{date|${formatDate(date, "YY年mm月")}}`;
    //     } else if (date.getDate() === 1) {
    //       result = `{time|${day}}\n{date|${date.getMonth() + 1}月}`;
    //     }
    //     return result;
    //   };
    // }
    options.xAxis.axisLabel.showMaxLabel = false;
    options.yAxis = [
      zAxis("#26C0C0", "降雨量(mm/h)", false),
      qAxis(true, false, "#26C0C0", ""),
    ];

    options.yAxis[0].nameTextStyle.padding = [0, 0, 0, toPixel(100)];
    options.yAxis[0].min = 0;
    options.series = [series(toSeries(t, r), 0, "降雨量", "#26C0C0", 5, "bar")];
    options.series[0].label = {
      show: true,
      formatter: (params) => {
        if (params.value[1] == 0) return "";
        else return params.value[1];
      },
    };
  }

  return options;
}

export function powerTotalReal(pTotal, pToday) {
  var options = option(true, "8px", "8px", "8px", "4px");
  options.xAxis = {
    type: "category",
    axisLabel: {
      color: "#333",
      fontSize: 12,
      fontWeight: 400,
    },
    axisLine: {
      lineStyle: {
        width: 2,
      },
    },
    data: ["1#机组", "2#机组", "3#机组", "4#机组"],
  };

  var colorToday = "#337ecc";
  var colorTotal = "#529b2e";
  options.yAxis = [
    zAxis(colorTotal, "电量(亿kw·h)", false),
    qAxis(true, false, colorToday, "电量(万kw·h)"),
  ];
  options.yAxis[0].nameTextStyle.padding = [0, 0, 0, toPixel(100)];
  options.yAxis[0].nameTextStyle.lineHeight = -30;
  options.yAxis[0].min = 0;
  options.series = [
    series(pTotal, 0, "累计发电", colorTotal, 5, "bar"),
    series(pToday, 1, "今日发电", colorToday, 5, "bar"),
  ];
  options.series[0].label = { show: true };
  options.series[1].label = { show: true };
  return options;
}

export function naviTotalToday(t, count) {
  var options = option(true, "8px", "8px", "8px", "4px");
  options.xAxis = {
    type: "category",
    axisLabel: {
      color: "#333",
      fontSize: 12,
      fontWeight: 400,
    },
    axisLine: {
      lineStyle: {
        width: 2,
      },
    },
    data: t,
  };

  var color = colors.zColor;
  options.yAxis = [
    zAxis(color, "数量(艘)", false),
    qAxis(true, false, color, ""),
  ];
  options.yAxis[0].min = 0;
  options.series = [series(count, 0, "通航船只数量", color, 5, "bar")];
  options.series[0].label = { show: true };
  return options;
}

export function naviGateOpen(t, e) {
  var options = option(true, "8px", "18px", "8px", "12px");
  var start = formatDate(new Date(), "YYYY-mm-dd 00:00:00");
  var end = formatDate(new Date(), "YYYY-mm-dd 24:00:00");
  options.xAxis = xAxis([start, end], true);
  var color = colors.zColor;
  options.yAxis = [
    zAxis(color, "开度(mm)", false),
    qAxis(true, false, color, ""),
  ];
  options.yAxis[0].min = 0;
  options.series = [series(toSeries(t, e), 0, "上闸首右侧人字门", color, 5)];

  return options;
}

export function screePlot(y) {
  var option = {
    title: {
      text: "污染源成分碎石图",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },

    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      name: "成分",
      nameLocation: "center",
      boundaryGap: false,
      data: new Array(y.length).fill(0).map((_, k) => k + 1),
      axisLine: {
        lineStyle: {
          color: "#609ee9",
          width: 3,
        },
      },
      axisLabel: {
        margin: 3,
        fontSize: 14,
        showMinLabel: true,
        showMaxLabel: true,
      },
      nameTextStyle: {
        color: "#609ee9",
        fontSize: 14,
        fontWeight: 600,
        // lineHeight: -30,
        padding: [5, 0, 0, 0],
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#609ee9",
          width: 3,
        },
        show: true,
      },
    },
    series: [
      {
        name: "重要程度",
        type: "line",
        data: y,
      },
    ],
  };
  return option;
}
